<template>
    <div>
        <div id="home-header" class="clear-fix">
            <div class="home-header-left">
                    <span>{{ curcity ? curcity :'北京' }}</span>
                    <i class="icon-angle-down"></i>
            </div>
            <div class="home-header-right">
                    <i class="iconfont icon-car"></i>
            </div>
            <div class="home-header-middle">
                <div class="search-container">
                    <i class="icon-search"></i>
                </div>
            </div>
        </div>
        <div class="img-div">
            <img src="/img/no-shop.jpg" class="img-nosuch"/>
        </div>

        <FootNav />
    </div>
</template>
<script>
import FootNav from '../../components/FootNav/FootNav'
export default {
    name:'Shop',
    data(){
        return{}
    },
    components:{
        FootNav
    }
}
</script>
<style scoped lang='less'>
#home-header {
    background-color: #ff5555;
    padding: 10px;
    * {
        color: #fff;
        font-size: 16px;
        line-height: 1;
        text-decoration: none;
    }
}
.home-header-left {
    width: 3rem;
    text-align: left;
    margin: 5px 0;
    float: left;
}
.home-header-middle {
    width: auto;
    margin: 0 1.5rem 0 3rem;

    .search-container {
        background-color: #fff;
        border-radius: 5px;
        overflow: hidden;
        padding: 5px;

        i {
            color: #ccc !important;
        }
        input {
            width: 90%;
            color:#000000 !important;
            font-size: 14px !important;
            font-weight: normal;
            border: none;
            overflow: hidden;
        }
    }
}
.home-header-right {
    width: 2rem;
    margin: 5px 0;
    text-align: right;
    float: right;
    i {
        font-size: 18px !important;
    }
}

.img-div{
    height: 100%;
    width:100%;
    text-align: center;
}
.img-nosuch{
    margin-top: 80px;
}
</style>